<template>
  <div>
    <table
      border="1"
      width="700"
      style="border-collapse: collapse"
    >
      <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th>
            <!-- 全选反选 -->
            <input type="checkbox" /> <span>全选</span>
          </th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in data" :key="index">
            <td>
                <label for="index">
                    <input 
                    :value="item.num * item.price "
                    type="checkbox" :key="index">
                </label>
            </td>
            <td><span>{{item.name}}</span></td>
            <td><span></span></td>
            <td><button @click="$emit('change-num',item.num - 1)" :disabled="item.num === 0">-</button>
            <span>{{item.num}}</span>
            <button @click="$emit('change-num',item.num + 1)" :disabled="item.num === 0">+</button></td>

            <td><span>{{item.price}}</span></td>
            <td><button @click="$emit('del-event',index)">删除</button></td>
        </tr>
      </tbody>
      <tfoot> 
        <tr>
          <td>合计:</td>
          <td>{{allPrice}}</td>
          <td colspan="5">
            
          </td>
        </tr>
      </tfoot>

    </table>
  </div>
</template>

<script>
export default {
    props:{
      data:{
        type:Array,
      }
    },
  data() {
    return {
       arr:[]
    };
  },
  computed:{
    allPrice(){
        return  this.data.reduce((sum,item)=> item.checked  === true? item.num * item.price + sum : '0',0)
    },
    // isAll:{
    //     // 获取get
    //     get(){
    //       return this
    //     },
    // }
  }
};
</script>

<style>
</style>